<template>
  <view class="service-card" @click="handleClick">
    <view class="card-content">
      <!-- 顶部：图片和主要信息 -->
      <view class="card-header">
        <image 
          class="card-image" 
          :src="data.image" 
          mode="aspectFill"
        />
        <view class="card-info">
          <text class="card-title">{{ data.title }}</text>
          <text class="card-desc">{{ data.desc }}</text>
          <view class="card-meta">
            <view class="meta-left">
              <view 
                class="card-tag" 
                :style="{ 
                  backgroundColor: tagStyle.bg, 
                  color: tagStyle.text 
                }"
              >
                {{ data.tag }}
              </view>
              <view class="card-views">
                <u-icon name="eye" size="12" color="#9ca3af" />
                <text class="views-text">{{ data.views }}</text>
              </view>
            </view>
            <text class="card-price">¥{{ data.price }}</text>
          </view>
        </view>
      </view>
      
      <!-- 底部：用户信息 -->
      <view class="card-footer">
        <view class="footer-item">
          <u-icon name="account" size="12" color="#9ca3af" />
          <text class="footer-text">{{ data.user }}</text>
        </view>
        <view class="footer-item">
          <u-icon name="phone" size="12" color="#9ca3af" />
          <text class="footer-text">{{ data.phone }}</text>
        </view>
        <view class="footer-item">
          <u-icon name="clock" size="12" color="#9ca3af" />
          <text class="footer-text">{{ data.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { getTagColor } from '@/utils/constants'

const props = defineProps({
  data: {
    type: Object,
    required: true,
    default: () => ({
      id: 0,
      image: '',
      title: '',
      desc: '',
      tag: '',
      price: '',
      views: '',
      user: '',
      phone: '',
      time: ''
    })
  }
})

const emit = defineEmits(['click'])

// 计算标签样式
const tagStyle = computed(() => {
  return getTagColor(props.data.tag)
})

// 处理点击事件
const handleClick = () => {
  emit('click', props.data)
}
</script>

<style scoped lang="scss">
.service-card {
  background-color: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  margin-bottom: 24rpx;
  transition: all 0.3s ease;
}

.service-card:active {
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  border-color: rgba(16, 185, 129, 0.2);
  transform: scale(0.99);
}

.card-content {
  padding: 32rpx;
}

.card-header {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
}

.card-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 24rpx;
  flex-shrink: 0;
  background-color: #f9fafb;
}

.card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: 28rpx;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 12rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-desc {
  font-size: 24rpx;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.meta-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.card-tag {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.card-views {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.views-text {
  font-size: 22rpx;
  color: var(--text-secondary);
}

.card-price {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--color-primary);
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 32rpx;
  padding-top: 24rpx;
  border-top: 2rpx solid #f3f4f6;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.footer-text {
  font-size: 22rpx;
  color: var(--text-secondary);
}
</style>


